<template>
	<view class="page">
		<!-- 导航栏 -->
		<navigation :showIcon="false" title="用户注册"></navigation>
		<view class="welcome">
			手机号注册
		</view>
		<view class="phone">
			<image src="../../static/loginIcon/zhanghao@2x.png" mode=""></image>
			<input type="number" value="" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder" placeholder-style="color:#999999"/>
		</view>
		<view class="phone">
			<image src="../../static/loginIcon/zhanghao@2x.png" mode=""></image>
			<input type="text" value="" v-model="realname" placeholder="请输入真实姓名" placeholder-class="placeholder" placeholder-style="color:#999999"/>
		</view>
	<!-- 	<view class="phone">
			<image src="../../static/loginIcon/yanzhengma@2x.png" mode=""></image>
			<input type="text" value="" v-model="securityCode" placeholder="请输入验证码" placeholder-class="placeholder" placeholder-style="color:#999999"/>
		    <text @click="getSecurityCode" v-if="showbtn">发送验证码</text>
		    <text  v-else style="color: #CCCCCC;">{{code_ts}}</text>
		</view> -->
		<view class="phone">
			<image src="../../static/loginIcon/mima@2x.png" mode=""></image>
			<input type="text" password value="" v-model="password"  placeholder="请输入密码(至少6位)" placeholder-class="placeholder" placeholder-style="color:#999999"/>
		</view>
		<view class="phone">
			<image src="../../static/loginIcon/mima@2x.png" mode=""></image>
			<input type="text" password value="" v-model="surePassword"  placeholder="再次输入密码(至少6位)" placeholder-class="placeholder" placeholder-style="color:#999999"/>
		</view>
		<button  class="btnlogin" @click="gotoHome">注册</button>
		<view class="bottomText">
			<text @click="isColor=!isColor" :style="{'background':isColor?'rgba(64,108,235,1)':'#C0C0C0'}"></text> 
			<text> 注册即表示同意</text>
			<text @click="sicpkAgreement()">   {{'   <<用户协议>>'}} </text> 
			<text @click="sicpk()">   {{'   <<隐私政策>>'}} </text> 			
		</view>
	</view>
</template>

<script>
	import navigation from '@/component/navigation.vue';
	import sun from '@/utils/sun.js'
	const app = getApp().globalData;
	export default {
		components: {
			navigation		
		},
		data() {
			return {
				// phone:'13918562275',
				// password:'123456',
				phone:'',
				realname:'',//真实姓名
				password:'',
				securityCode:'',//验证码
				surePassword:'',//确认密码
				isColor:true,
				sec: 60, // 倒计时秒数
				showbtn: true, // 展示获取验证码或倒计时按钮判断
				code_ts: '发送验证码', //倒计时提示文字
				
			};
		},
		onLoad() {
			
		},
		methods:{
			//注册
			gotoHome(){
				let that=this;
				if(!that.phone){
					uni.showToast({
						icon:"none",
						title:"手机号不能为空"
					})
					return
				}
				if(!that.realname){
					uni.showToast({
						icon:"none",
						title:"真实姓名不能为空"
					})
					return
				}
				// if(!that.securityCode){
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:"验证码不能为空"
				// 	})
				// 	return
				// }
				if(!that.password){
					uni.showToast({
						icon:"none",
						title:"密码不能为空"
					})
					return
				}
				if(!that.surePassword){
					uni.showToast({
						icon:"none",
						title:"确认密码不能为空"
					})
					return
				}
				if(that.surePassword!=that.password){
					uni.showToast({
						icon:"none",
						title:"确认密码与密码不一致"
					})
					return
				}
				if(that.isColor==false){
					uni.showToast({
						icon:"none",
						title:"请同意用户协议和隐私政策"
					})
					return
				}
				sun.request({
					url: "/h5/ucenter.passport/register",
					showLoading: true,
					token:false,
					data:{
						mobile:that.phone,
						realname:that.realname,
						password:that.password
					},
					success(res) {				
						if(res.code==200){	
							uni.showToast({
								icon: "none",
								title: "注册成功~",
							})
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}else{
							uni.showToast({
								icon:"none",
								title:res.msg
							})
						}
					},
					fail(code,msg) {
						uni.showToast({
							icon: "none",
							title: code+"数据获取失败~",
						})
					}
				})			
								
			},
			sicpkAgreement(){
				uni.navigateTo({
					url:"../login/userAgreement/userAgreement"
				})
			},
			sicpk(){
				uni.navigateTo({
					url:"../login/intimacy/intimacy"
				})
			},
			
		}
	}
</script>

<style lang="less">
.page{
	padding: 54upx;
}
.welcome{
	margin-top: 99upx;
	font-size:48upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(0,0,0,1);
	margin-bottom: 68upx;
}
.phone{
	width: 100%;
	margin-bottom: 30upx;
	position: relative;
	image{
		width: 28upx;
		height: 28upx;
		position: absolute;
		top:50%;
		left: 5%;
		transform: translateY(-50%);
	}
	input{
		padding-left: 14%;
		padding-top: 31upx;
		padding-bottom: 31upx;
		// border-bottom: 1upx solid rgba(192,192,192,1);
		box-shadow:0upx 1upx 2upx 1upx rgba(224,224,224,0.52);
		border-radius:49upx;
	}
	text{
		color:#406CEB;
		font-size: 28upx;
		position: absolute;
		right: 0;
		top:50%;
		right: 5%;
		transform: translateY(-50%);
	}
}
.placeholder{
	font-size:28upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(212,212,212,1);
}
.btnlogin{
	width:621upx;
	height:73upx;
	background:rgba(64,108,235,1);
	border-radius:37upx;
	line-height: 73upx;
	font-size:30upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin-top: 99upx;
}
.bottomText{
	width:100% ;
	position: fixed;
	bottom: 20upx;
	left: 0upx;
	color: #333333;
	z-index: 100;
	font-size: 20upx;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bottomText text:nth-child(1){
	display: inline-block;
    width: 20upx;
	height: 20upx;
	border-radius: 50%;
	margin-right: 2upx;
}
</style>
